<template>
	<view class="albox">
		<zcLabel :list4="list4" @tabItem='gettabItem'></zcLabel>
		<view v-if = "tabshow =='jbxx'">
			<view class="cardbox">
				<view class="titleBox">
					<span class="title-text-style">基本信息</span>
					<view class="titleline"></view>
				</view>
				<view>
					<card :listData="listData" @getdata='handleData'>

					</card>
				</view>
			</view>
            <view class="cardbox">
            	<view class="titleBox">
            		<span class="title-text-style">建筑信息</span>
            		<view class="titleline"></view>
            	</view>
            	<view>
            		<card :listData="buildData" @getdata='handleData'></card>
            	</view>
            </view>
		    <view class="cardbox">
		    	<view class="titleBox">
		    		<span class="title-text-style">位置信息</span>
		    		<view class="titleline"></view>
		    	</view>
		    	<view>
		    		<card :listData="locationData" @getdata='handleData'></card>
		    	</view>
		    </view>
			<view style="height: 50rpx;"></view>
		</view>
		<!-- 来源信息 -->
		<view v-if="tabshow=='jsxx'">
			<view class="cardbox">
				<view class="titleBox">
					<span class="title-text-style">来源信息</span>
					<view class="titleline"></view>
				</view>
				<view>
					<card :listData="locationData" @getdata='handleData'></card>
				</view>
			</view>
		</view>
		<!-- 产证信息 -->
		<view v-if="tabshow=='czxx'">
			<view class="cardbox">
				<view class="titleBox">
					<span class="title-text-style">产证信息</span>
					<view class="titleline"></view>
				</view>
				<view>
					<card :listData="locationData" @getdata='handleData'></card>
				</view>
			</view>
		</view>
		<!-- 价值信息 -->
		<view v-if="tabshow=='jzxx'">
			<view class="cardbox">
				<view class="titleBox">
					<span class="title-text-style">价值信息</span>
					<view class="titleline"></view>
				</view>
				<view>
					<card :listData="locationData" @getdata='handleData'></card>
				</view>
			</view>
		</view>
		<!-- 日期选择 -->
		<view>
			<u-datetime-picker :show="show" v-model="value1" mode="date"
				@confirm="confirmData"></u-datetime-picker>
		</view>
	</view>

</template>

<script>
	import zcLabel from '../../components/zcLabel.vue'
	import card from '../AssetInventory/components/card.vue'
	export default {
		components: {
			zcLabel,
			card
		},
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				key: '',
				tabshow:'jbxx',
				listData: [{
						name: '资产编码',
						value: 'x213213123',
						key: 'zcbm',
						icon: ''
					},
					{
						name: '资产名称',
						value: '中电',
						key: 'zcmc',
						icon: ''
					},
					{
						name: '所属项目',
						value: '中电',
						key: 'scxm',
						icon: 'arrow-right'
					},
					{
						name: '${统计数量名称/单位}',
						value: 'x213213123',
						key: 'tjdw',
						icon: ''
					},
					{
						name: '接收时间',
						value: '',
						key: 'jssj',
						icon: 'calendar'
					},
					{
						name: '处置时间',
						value: '',
						key: 'czsj',
						icon: 'calendar'
					},
					{
						name: '资产类型',
						value: '',
						key: 'zclx',
						icon: 'arrow-right'
					},
					{
						name: '资产用途',
						value: '',
						key: 'zcyt',
						icon: 'arrow-right'
					},
					{
						name: '关联资产',
						value: '',
						key: 'glzc',
						icon: 'arrow-right'
					},
					{
						name: '资产图片',
						value: '',
						key: 'zctp',
						icon: ''
					},
					{
						name: '备注',
						value: '',
						key: 'zcbz',
						icon: ''
					},
				],
				buildData:[
					{
						name: '建成年份',
						value: '',
						key: 'jcnf',
						icon: 'calendar'
					},
					{
						name: '建筑结构',
						value: '',
						key: 'jcjg',
						icon: 'arrow-right'
					},
				],
				locationData:[
					{
						name: '资产位置',
						value: '',
						key: 'zcwz',
						icon: 'map-fill'
					},
					{
						name: '所属街道',
						value: '',
						key: 'ssjd',
						icon: 'arrow-right'
					},
					{
						name: '详细地址',
						value: '',
						key: 'xxdz',
						icon: 'arrow-right'
					},
				],
				list4: [{
					name: '基本信息',
					value:'jbxx'
				}, {
					name: '接收信息',
					value:'jsxx'
				}, {
					name: '产证信息',
					value:'czxx'
				}, {
					name: '价值信息',
					value:'jzxx'
				}],
			}
		},
		methods: {
			gettabItem(e){
				console.log(e)
				this.tabshow = e.value
			},
			handleData(e) {
				console.log('open', e)
				this.key = e.key
				if (e.key == "jssj") this.show = true
				if (e.key == "czsj") this.show = true
			},
			confirmData(e) {
				console.log(e)
				if (this.key === 'jssj') this.getTimeFormat(e)
				if (this.key === 'czsj') this.getTimeFormat(e)
				this.show = false
			},
			async getTimeFormat(e) {
				let timeValue = await uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.listData.filter(item => {
					if (item.key == this.key) {
						item.value = timeValue
					}
				})
			}
		}
	}
</script>
<style scoped>
	.listBox {
		margin: 25rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0px 1px 1px 1px #818181;
	}

	.cardbox {
		width: 700rpx;
		margin: 10rpx auto;
		/* border: 1px solid #3772ff; */
	}

	.albox {
		width: 100%;
		height: 100%;

	}

	.titleBox {
		width: 150rpx;
		position: relative;
		margin: 20rpx 0;
	}

	.titleline {
		background: linear-gradient(to right, #3772ff, #fff);
		width: 100%;
		height: 15rpx;
		position: absolute;
		left: 0;
		bottom: 3rpx;
		z-index: -1;
	}
</style>